<template>
  <view class="page">
    <!-- <u-navbar :fixed="true" :placeholder="false" title="产品详情" :bgColor="headBackground" :autoBack="true"
			:titleStyle="{color: headTitleColor}" :leftIconColor="headTitleColor">
		</u-navbar> -->

    <!-- 轮播图 -->
    <view class="banner-box">
      <view class="banner">
        <u-swiper
          radius="0"
          circular
          indicator
          indicatorMode="line"
          height="375"
          :list="banners"
          @click="swiperClick"
          @change="(e) => (currentBannerIndex = e.current)">
          <view slot="indicator" class="indicator-num">
            <text class="indicator-num__text">
              {{ currentBannerIndex + 1 }}/{{ banners.length }}
            </text>
          </view>
        </u-swiper>
      </view>
    </view>

    <view class="page-ctx">
      <view class="title-wrap">
        <view class="title">
          {{ info.title }}
        </view>

        <view class="price-info flex-between">
          <view class="price">{{ info.priceSale }}积分</view>
          <view class="sale-num">1000+付款</view>
        </view>
      </view>

      <view class="guige-wrap" @click="openGuigePop()">
        <view class="addr-info flex">
          <view class="label">物流</view>
          <view class="right flex">
            <view class="addr-text">
              48小时内从{{ vuex_config.comAddress }}发货
            </view>
          </view>
        </view>
        <view class="guige-info flex-between">
          <view class="label">规格</view>
          <view class="right flex-between">
            <view class="val">
              <view class="val-0" v-if="!guige_select.id">请选择规格</view>
              <view class="val-1" v-else>
                {{ guige_select.attr_vals }}
                <text class="buy-num" style="margin-left: 20rpx">
                  x {{ buyNumber }}
                </text>
              </view>
            </view>
            <image class="arrow" src="@/static/image/arrow.png" mode=""></image>
          </view>
        </view>
      </view>

      <view class="page-bottom">
        <!-- <u-sticky offset-top="0" bgColor="#ffffff" zIndex="10">
					<view class="tabs-wrap">
						<view class="tabs flex-center">
							<view class="tab-item" v-for="(item,index) in tabList" :key="index" @click="toggleTab(item)"
								:class="{active: tabSelect.title == item.title }">
								{{item.title}}
							</view>
						</view>
					</view>
				</u-sticky> -->

        <view class="content-ctx">
          <view class="sec-box sec-reviews">
            <view class="sec-title flex-between">
              <text class="title-text">
                评价
                <text class="sec-num">
                  ({{ info.commentNum > 999 ? "999+" : info.commentNum }})
                </text>
              </text>

              <view class="more-box flex" @click="toReviews()">
                <text>好评度87%</text>
                <image
                  class="arrow"
                  src="@/static/common/arrow.png"
                  mode=""></image>
              </view>
            </view>
            <view class="reviews-box-wrap" v-if="reviews.length">
              <view class="reviews-box">
                <reviewsList :list="reviews" />
              </view>
              <view class="all-reviews flex-center">
                <view class="btn-all fit-text" @click="toReviews()">
                  查看全部评价
                </view>
              </view>
            </view>

            <view class="reviews-empty" v-else>
              <w_empty emptyText="未找到商品评价信息~"></w_empty>
            </view>
          </view>

          <view class="sec-box sec-suggest">
            <view class="sec-title flex-between">
              <text class="title-text">为您推荐</text>
              <view class="more-box flex" @click="toMoreSuggest()">
                <text>查看全部</text>
                <image
                  class="arrow"
                  src="@/static/common/arrow.png"
                  mode=""></image>
              </view>
            </view>
            <view class="suggest-wrap">
              <view class="swiper-box">
                <swiper
                  class="swiper"
                  :indicator-dots="true"
                  indicator-color="#F8F8F8"
                  indicator-active-color="#CB0011"
                  :circular="true"
                  :vertical="false"
                  :autoplay="true"
                  :interval="4000"
                  :duration="500"
                  previous-margin="0"
                  next-margin="0"
                  :display-multiple-items="1">
                  <swiper-item
                    v-for="(items, index) in products_suggest_group"
                    :key="index">
                    <view class="swiper-item">
                      <view class="swiper-products">
                        <view
                          class="product-item"
                          v-for="(item, index) in items"
                          :key="index"
                          @click="toSuggestDetail(item)">
                          <view class="poster-box">
                            <image :src="item.thumb" mode="aspectFill"></image>
                          </view>
                          <view class="title-box flex">
                            <view class="title ellipsis-2">
                              {{ item.title }}
                            </view>
                          </view>

                          <view class="price-info">
                            {{ item.priceSale }}积分
                          </view>
                        </view>
                      </view>
                    </view>
                  </swiper-item>
                </swiper>
              </view>
            </view>
          </view>

          <view class="sec-box sec-detail">
            <view class="sec-title">产品简介</view>
            <view
              class="detail-box"
              :class="{ 'has-text-content': has_text_content }">
              <view class="html-box">
                <u-parse
                  :content="info.content"
                  :tagStyle="richStyle"></u-parse>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <w_bottom_safe height="160" />

    <view class="page-foot" v-if="!is_miaosha">
      <view class="safe-fixed-bottom">
        <view class="grid-box flex-between">
          <view class="grid-item" @click="toShopIndex()">
            <view class="icon-box">
              <image
                class="icon"
                src="@/static/product-detail/icon-home.png"
                mode=""></image>
            </view>
            <view class="title">首页</view>
          </view>

          <view class="grid-item" @click="toCart()">
            <view class="icon-box">
              <image
                class="icon"
                src="@/static/product-detail/icon-cart.png"
                mode=""></image>

              <view class="cart-number fit-text" v-if="vuex_cart_number > 0">
                {{ vuex_cart_number }}
              </view>
            </view>
            <view class="title">购物车</view>
          </view>
        </view>

        <view class="btns flex-center">
          <view class="btn flex-center btn-cart" @click="doAddCart()">
            加入购物车
          </view>
          <view class="btn flex-center btn-buy" @click="doBuy()">立即购买</view>
        </view>
      </view>
    </view>

    <!-- 弹窗-产品规格  -->
    <product_sku_pop ref="product_sku_pop" @confirm="confirmGuige" />
    <!-- 弹窗-客服二维码 -->
    <product_share_pop ref="product_share_pop" />
  </view>
</template>

<script>
import { mapState } from "vuex";
import dayjs from "dayjs";

import reviewsList from "@/components/review/reviewList.vue";
import product_sku_pop from "@/components/product/product_sku_pop.vue";
import product_share_pop from "@/components/product/product_share_pop.vue";
import count_down_in_detail from "@/components/count-down/count_down_in_detail.vue";

export default {
  components: {
    reviewsList,
    product_sku_pop,
    product_share_pop,
    count_down_in_detail,
  },
  data() {
    return {
      headBackground: "rgba(255,255,255,0)", //控制顶部标题栏颜色 默认透明颜色 transparent
      headTitleColor: "rgba(255,255,255,1)",

      id: "", //产品id
      info: {
        title: "",
        subtitle: "",
        kucun: "",
        priceMarket: "",
        priceSale: "",
        sale_num: "",
        content: "",
        banners: [],
        guigeList: [],
      },
      has_text_content: false,
      banners: [],
      is_fav: false,
      //
      is_miaosha: false, //是否秒杀商品
      miaosha_daojishi_time: 0, //秒杀 倒计时时间
      //
      currentBannerIndex: 0,
      reviews: [],
      count: 0,
      reviews_count: 0,
      pagination: {
        page: 1,
        limit: 10,
      },

      //

      //
      is_in_flashSale: false, //是否处于秒杀活动中
      time_flashSale: 0, //秒杀倒计时 毫秒数
      status_miaosha: "",
      limit_buy_num: 0, //限购数量
      //

      tabSelect: {
        title: "商品详情",
      },
      tabList: [
        {
          title: "商品详情",
          selector: ".sec-detail",
        },
        {
          title: "用户评价",
          selector: ".sec-reviews",
        },
      ],
      richStyle: {
        // 字符串的形式
        p: "color: #000000;font-size: 12px;line-height:1.6;font-family: PingFangSC-Regular;text-align:justify;",
        span: "color: #000000;font-size: 12px;line-height:1.6;font-family: PingFangSC-Regular;",
        img: "vertical-align: bottom;",
      },

      //规格信息
      guige_select: {},
      buyNumber: 1,
      //规格信息

      products_suggest_group: [],
    };
  },
  computed: {
    ...mapState(["vuex_cart_number"]),

    disabledBuy() {
      let ret = false;
      if (this.is_miaosha && !this.is_in_flashSale) {
        ret = true;
      }
      return ret;
    },
  },

  onLoad(option) {
    this.id = option.id;

    this.setView();
  },

  onShow() {},
  onHide() {},
  onPageScroll(e) {
    console.log("滚动e", e);

    let percent = e.scrollTop / 50;
    if (percent > 1) {
      percent = 1;
    }
    this.headBackground = `rgba(255,255,255,${percent})`;

    if (e.scrollTop > 10) {
      this.headTitleColor = `rgba(0,0,0,${percent})`;
    } else {
      this.headTitleColor = `rgba(255,255,255,1)`;
    }
  },

  onPullDownRefresh() {
    // this.get_info(this.goodsId)
    // setTimeout(() => {
    // 	uni.stopPullDownRefresh()
    // }, 500)
  },

  methods: {
    setView() {
      this.query_product();
      this.query_reviews();
      this.query_cart();
    },

    query_product() {
      this.showLoading();
      this.$api({
        url: "/service.php",
        method: "get",
        data: {
          action: "product_detail",
          inventoryId: this.id,
        },
      }).then((res) => {
        if (res.code == 200) {
          let data = res.data;

          this.setCustomShareInfo({
            title: data.title,
            path: "/pages-pkg-product/pages/product/product-detail",
            imageUrl: data.thumb,
            query: {
              id: this.id,
            },
          });

          this.info = data;
          this.banners = data.images || [];
          try {
            this.has_text_content = /[\u4e00-\u9fa5]/.test(data.content);
          } catch (e) {
            //TODO handle the exception
          }

          //
          this.reviews = data.commentList || [];
          this.reviews_count = data.comment_num;
          //
          this.is_fav = data.ifShoucang == 1;
          //

          //秒杀
          this.set_miaosha_info(data);

          this.query_suggest_products();
        } else {
          this.$alert(res);
        }
        this.hideLoading();
      });
    },

    set_miaosha_info(data) {
      let { seckillInfo } = data;
      if (seckillInfo && seckillInfo.id) {
        this.is_miaosha = true;
        this.miaosha_daojishi_time = seckillInfo.second * 1000;
        this.status_miaosha =
          seckillInfo.second > 0 ? "秒杀进行中" : "秒杀未开始";
      } else {
        this.is_miaosha = false;
      }
      this.info.is_miaosha = this.is_miaosha; //秒杀状态
    },

    //设置规格
    set_specifications(data) {
      //规格列表组
      let inventorys = data.inventorys;
      let list_specifications = [];
      if (inventorys && inventorys.length) {
        inventorys.forEach((v) => {
          list_specifications.push({
            ...v,
            kucun: parseInt(v.kucun),
            keyVals: v.keyVals,
          });
        });
      } else {
        let item = this.info;
        list_specifications = [
          {
            status: item.product_status,
            image: item.images[0],
            inventoryId: item.inventoryId,
            keyVals: item.keyVals == "无" ? "默认" : item.keyVals,
            kucun: parseInt(item.kucun),
            priceMarket: item.priceMarket,
            priceSale: item.priceSale,
            priceSale2: item.priceSale2,
            priceSale3: item.priceSale3,
            nums1: item.nums1,
            nums2: item.nums2,
          },
        ];
      }

      //单规格商品 默认勾选
      if (list_specifications.length == 1) {
        this.select_specifications = list_specifications[0];
      } else {
        // this.select_specifications = {};
        this.select_specifications =
          list_specifications.find((v) => v.inventoryId == this.id) || {};
      }
      this.list_specifications = list_specifications;

      //规格拆分
      let skus = data.skus || {};
      if (skus && Object.keys(skus).length) {
        this.sku_mode = "多规格";
        let select_shuxing_list = [];
        Object.keys(skus).forEach((v) => {
          select_shuxing_list.push({
            key: skus[v].key,
          });
        });

        //console.log("商品规格默认 select_shuxing_list", select_shuxing_list);
        this.select_shuxing_list = select_shuxing_list;
      } else {
        this.sku_mode = "单规格";
      }
    },

    query_suggest_products() {
      this.$api({
        url: "/service.php",
        method: "get",
        data: {
          action: "product_plist",
          page: 1,
          pageNum: 18,
          channelId: this.info.channelId.split(",")[0],
        },
      }).then((res) => {
        if (res.code == 200) {
          this.products_suggest_group = this.get_product_swiper_group(
            res.data.list
          );
        }
      });
    },
    get_product_swiper_group(list) {
      let group_length = 6;
      let group_list = [];
      list.forEach((v, index) => {
        let gindex = Math.floor(index / group_length);
        if (!group_list[gindex]) {
          group_list[gindex] = [];
        }
        group_list[gindex].push(v);
      });
      return group_list;
    },

    toSuggestDetail(item) {
      this.$log("切换产品", item);
      this.id = item.inventoryId;

      this.showLoading();
      this.setView();
      uni.pageScrollTo({
        scrollTop: 0,
      });
    },

    toMoreSuggest() {
      let category_id = this.info.channelId.split(",")[0];
      this.toRoute({
        path: "/product-list",
        query: {
          title: "相关推荐",
          category_id: category_id,
        },
      });
    },

    query_reviews() {
      // this.$api({
      // 	url: '/getCommentList',
      // 	method: 'get',
      // 	data: {
      // 		productId: this.id,
      // 		...this.pagination
      // 	},
      // }).then(res => {
      // 	if (res.code == 200) {
      // 		res.data.list.forEach(v => {
      // 			v.picList = v.images.split(',')
      // 			this.format_review_item_star(v)
      // 		})
      // 		this.reviews = res.data.list;
      // 		this.reviews_count = res.data.count;
      // 	}
      // })
    },

    query_cart() {
      this.$api({
        url: "/service.php",
        method: "get",
        data: {
          action: "gouwuche_lists",
        },
      }).then((res) => {
        if (res.code == 200) {
          let total_num = 0;
          res.data.forEach((v) => {
            total_num += parseInt(v.num);
          });
          this.$store.commit("set_vuex_cart_number", total_num);
        }
      });
    },

    //处理评分数据
    format_review_item_star(item) {
      let starItems = [];
      for (var i = 1; i <= 5; i++) {
        starItems.push({
          value: i <= item.star ? 1 : 0,
        });
      }
      item.starItems = starItems;
    },

    openGuigePop() {
      this.$refs.product_sku_pop.init(this.info);
    },

    confirmGuige(data) {
      this.$log("confirmGuige", data);

      // let {
      // 	type,
      // 	guige,
      // 	buyNumber
      // } = data;
      // if (type) {

      // }
      // if (guige.id) {
      // 	this.guige_select = guige;
      // 	this.buyNumber = buyNumber
      // }
    },

    swiperClick(index) {},

    toggleTab(item) {
      this.tabSelect = item;

      // .sec-xuzhi
      // .sec-detail
      // .sec-reviews
      // var window_info = uni.getWindowInfo();
      // console.log('window_info', window_info)
      // var scrollTop = 0;

      uni.pageScrollTo({
        // scrollTop: 600,
        selector: item.selector,
        duration: 300,
      });
    },

    toReviews() {
      this.toRoute({
        path: "/product-review-list",
        query: {
          productId: this.info.productId,
          // skuid: this.id,
        },
      });
    },

    toShopIndex() {
      this.toRoute({
        path: "/index",
        query: {},
      });
    },
    toCart() {
      this.toRoute({
        path: "/cart",
        query: {},
      });
    },

    openShare() {
      this.$refs.product_share_pop.init(this.info);
    },
    oncloseShare() {},
    onopenShare() {},

    doKefu() {
      if (!this.shop_info.kf_img) {
        this.$alert("商家未设置客服信息");
        return;
      }
      this.$refs.store_kefu_qrcode_pop.init(this.shop_info.kf_img || "");
    },

    doFav() {
      if (this.is_fav) {
        uni.$u.throttle(this.doFavCancelFn, 1500, true);
      } else {
        uni.$u.throttle(this.doFavFn, 1500, true);
      }
    },

    doFavFn() {
      this.$api({
        url: "/addCollect",
        method: "post",
        data: {
          productId: this.id,
        },
      }).then((res) => {
        this.$alert(res);
        if (res.code == 200) {
          this.is_fav = !this.is_fav;
        }
      });
    },
    doFavCancelFn() {
      this.$api({
        url: "/qxCollect",
        method: "post",
        data: {
          productId: this.id,
        },
      }).then((res) => {
        this.$alert(res);
        if (res.code == 200) {
          this.is_fav = !this.is_fav;
        }
      });
    },

    doAddCart() {
      this.openGuigePop();
    },

    doBuy() {
      this.openGuigePop();

      return;
      if (!this.mix_checkLogin()) {
        return;
      }

      // if (!this.guige_select.id) {
      // 	this.openGuigePop();
      // 	return
      // }

      // let data = this.info;
      // let guige = this.guige_select;
      // let info = [{
      // 	attr_vals: guige.attr_vals || "",
      // 	image: data.thumb,
      // 	inventoryId: guige.id,
      // 	num: this.buyNumber,
      // 	priceMarket: guige.priceMarket || 0,
      // 	priceSale: guige.priceSale || 0,
      // 	productId: data.id,
      // 	title: data.title
      // }]
      // this.$store.commit('set_cache_store_product', JSON.stringify(info))
      // this.toRoute({
      // 	path: '/store-order-submit',
      // 	query: {
      // 		store_id: this.store_id,
      // 		from: 'detail'
      // 	}
      // })
    },

    open_share() {
      this.is_show_share_list = true;
      this.is_show_share_goods = true;
    },
    cancel_poup() {
      this.is_show_share_list = false;
      this.is_show_share_goods = false;
    },
  },
};
</script>

<style lang="scss">
page {
  background: #f8f8f8;
}
</style>

<style lang="scss" scoped>
/deep/.u-swiper {
  overflow: auto !important;
  background-color: transparent !important;
}

.banner-box ::v-deep .u-swiper__indicator {
  position: absolute;
  right: 32rpx;
  bottom: 20rpx;
}

.indicator-num {
  padding: 2px 0;
  background-color: rgba(255, 255, 255, 0.24);
  border-radius: 100px;
  width: 96rpx;
  height: 40rpx;
  display: flex;
  justify-content: center;
  align-items: center;

  .indicator-num__text {
    font-family: PingFang SC, PingFang SC;
    font-weight: 800;
    font-size: 28rpx;
    color: #ffffff;
  }
}

//

/deep/ uni-swiper .uni-swiper-dots-horizontal {
  bottom: 0;
}

.page {
  .page-ctx {
    padding: 24rpx 32rpx;
  }
}

.banner-box {
  .banner {
  }
}

.sale-wrap {
  position: relative;
  width: 100%;
  height: 130rpx;

  .sale-bg {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 130rpx;

    image {
      width: 100%;
      height: 130rpx;
    }
  }

  .sale-info {
    position: absolute;
    z-index: 2;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    height: 130rpx;
    padding: 0 32rpx;

    .price-box {
      .price-1 {
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 32rpx;
        color: #ffffff;

        .unit {
          font-family: PingFang SC, PingFang SC;
          font-weight: bold;
          font-size: 24rpx;
          color: #ffffff;
        }
      }

      .price-2 {
        text-decoration: line-through;
        margin-top: 10rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 24rpx;
        color: #ffffff;
      }
    }

    .right-info {
      .box-count {
        margin-left: 30rpx;

        .flash-status {
          margin-bottom: 10rpx;
          text-align: right;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #ffffff;
        }
      }
    }

    &.flashSale {
      .price-box {
        .price-1 {
          color: #ffffff;

          .unit {
            color: #eeeeee;
          }
        }

        .price-2 {
          color: #eeeeee;
        }

        .yishou {
          color: #eeeeee;
        }
      }

      .right-info {
        .kucun {
          background: #fd7979;
          color: #ffffff;
        }

        .box-count {
        }
      }
    }
  }
}

.title-wrap {
  // margin-top: 24rpx;
  margin-bottom: 24rpx;
  padding: 34rpx 24rpx 28upx;
  background: #ffffff;
  // box-shadow: 0rpx 0rpx 16rpx 2rpx rgba(0, 0, 0, 0.08);
  border-radius: 16rpx 16rpx 16rpx 16rpx;

  .title {
    font-weight: bold;
    font-size: 28rpx;
    color: #000000;
  }

  .subtitle {
    margin-top: 16rpx;
    margin-bottom: 16rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 24rpx;
    color: #7d7d7d;
    line-height: 1.5;
  }

  .price-info {
    margin-top: 26rpx;

    .price {
      font-weight: bold;
      font-size: 32rpx;
      color: #e23410;
    }

    .sale-num {
      font-weight: 400;
      font-size: 20rpx;
      color: #9695a3;
    }
  }
}

.guige-wrap {
  min-height: 108rpx;
  padding: 32rpx 24rpx;
  padding: 16rpx 0rpx;
  background: #ffffff;
  // box-shadow: 0rpx 0rpx 16rpx 2rpx rgba(0, 0, 0, 0.08);
  border-radius: 16rpx 16rpx 16rpx 16rpx;

  .addr-info {
    padding: 14rpx 24rpx;

    .addr-text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #000000;
    }
  }

  .guige-info {
    padding: 14rpx 24rpx;

    .val-0 {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #b3b9c9;
    }

    .val-1 {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #000000;
    }
  }

  .label {
    font-family: PingFang SC, PingFang SC;
    font-weight: 800;
    font-size: 30rpx;
    color: #222222;
  }

  .right {
    flex: 1;
    overflow: hidden;
    padding-left: 24rpx;

    .val {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #222222;
    }

    .arrow {
      width: 12rpx;
      height: 20rpx;
    }
  }
}

::v-deep .store-item {
  padding-left: 0;
  padding-right: 0;
  margin-bottom: 0;
}

.page-bottom {
  margin-top: 20rpx;
  // background: #FFFFFF;
  border-radius: 20rpx 20rpx 20rpx 20rpx;
}

.tabs-wrap {
  .tabs {
    border-bottom: 1rpx solid #eee;

    .tab-item {
      position: relative;
      padding: 33rpx 0;
      text-align: center;
      flex: 1;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 30rpx;
      color: #222222;

      &.active {
        font-weight: bold;

        &::after {
          content: "";

          position: absolute;
          z-index: 2;
          bottom: 0;
          left: 50%;
          transform: translate(-50%);
          width: 40rpx;
          height: 6rpx;
          background: #44c4be;
          border-radius: 0rpx 0rpx 0rpx 0rpx;
        }
      }
    }
  }
}

.content-ctx {
  padding: 0;

  .sec-title {
    font-family: PingFang SC, PingFang SC;
    font-weight: 800;
    font-size: 30rpx;
    color: #222222;

    .title-text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 800;
      font-size: 30rpx;
      color: #222222;
    }
    .sec-num {
      margin-left: 8upx;
      font-weight: 400;
      font-size: 20rpx;
      color: #9695a3;
    }

    .more-box {
      text {
        font-weight: 400;
        font-size: 20rpx;
        color: #9695a3;
      }

      .arrow {
        margin-left: 16rpx;
        width: 12rpx;
        height: 20rpx;
      }
    }
  }
}

.sec-reviews {
  padding: 32rpx 24rpx;
  background: #ffffff;
  // box-shadow: 0rpx 0rpx 16rpx 2rpx rgba(0, 0, 0, 0.08);
  border-radius: 16rpx 16rpx 16rpx 16rpx;

  .reviews-box {
    margin-top: 20rpx;
    padding-bottom: 40rpx;
    // border-bottom: 1rpx solid #eee;

    ::v-deep .reviews-item {
      box-shadow: none;
      padding: 0;
      margin-bottom: 40rpx;
    }
  }

  .all-reviews {
    .btn-all {
      min-width: 228rpx;
      height: 56rpx;
      background: #ffffff;
      border-radius: 98rpx 98rpx 98rpx 98rpx;
      border: 2rpx solid #e1e3e8;

      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #9695a3;
    }
  }
}

// 推荐商品
.sec-suggest {
  margin-top: 24rpx;
  padding: 32rpx 24rpx;
  background: #ffffff;
  // box-shadow: 0rpx 0rpx 16rpx 2rpx rgba(0, 0, 0, 0.08);
  border-radius: 16rpx 16rpx 16rpx 16rpx;

  .swiper-box {
    .swiper {
      height: 750rpx;

      .swiper-item {
        position: relative;
        height: 750rpx;
        overflow: hidden;
        padding: 0 0rpx;
        padding-top: 32rpx;
      }
    }
  }

  .swiper-products {
    padding: 0;
    display: flex;
    // justify-content: space-between;
    flex-wrap: wrap;

    .products-scroll-box {
      white-space: nowrap;
    }

    .product-item {
      display: inline-block;
      width: 202rpx;
      margin-right: 16rpx;
      margin-top: 30rpx;

      &:nth-child(3n) {
        margin-right: 0;
      }

      &:nth-child(-n + 3) {
        margin-top: 0;
      }

      .poster-box {
        width: 202rpx;
        height: 202rpx;
        border-radius: 8rpx;

        image {
          width: 202rpx;
          height: 202rpx;
        }
      }

      .title-box {
        height: 76rpx;
      }

      .title {
        font-size: 28rpx;
        color: #000000;
      }

      .price-info {
        margin-top: 14rpx;
        text-align: left;
        height: 40rpx;
        font-weight: bold;
        font-size: 28rpx;
        color: #e23410;
      }
    }
  }
}

.sec-detail {
  margin-top: 24rpx;
  background: #ffffff;
  // box-shadow: 0rpx 0rpx 16rpx 2rpx rgba(0, 0, 0, 0.08);
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  overflow: hidden;

  .sec-title {
    height: 100rpx;
    line-height: 100rpx;
    padding: 0 24rpx;
  }

  .detail-box {
    &.has-text-content {
      padding: 0 24rpx 24rpx;
    }
  }
}

// 分享
.poup-share-box {
  padding: 48rpx 150rpx 160rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .share-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    image {
      width: 48rpx;
      height: 48rpx;
    }

    text {
      font-size: 24rpx;
      color: #000000;
      margin-top: 10rpx;
    }

    .wechat-btn {
      background-color: transparent;
      line-height: 0;
    }
  }

  .bott {
    .btn {
      border-radius: 40rpx;
      border: 2rpx solid #d2d5df;
      font-weight: bold;
      font-size: 28rpx;
      color: #545b6a;
      background: #ffffff;
    }
  }
}

// 底部操作
.page-foot {
  .grid-box {
    flex: 1;
    padding-right: 20rpx;

    .grid-item {
      position: relative;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .btn-kefu {
        position: absolute;
        opacity: 0;
        z-index: 2;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
      }

      .icon-box {
        position: relative;
        width: 40rpx;
        height: 40rpx;
        display: flex;
        justify-content: center;
        align-items: center;

        .icon {
          width: 36rpx;
          height: 36rpx;
        }

        .cart-number {
          position: absolute;
          z-index: 2;
          right: -20rpx;
          top: -20rpx;

          padding: 2rpx;
          min-width: 30rpx;
          background: #ff0000;
          color: #ffffff;
          border-radius: 50%;
          font-size: 20rpx;
        }
      }

      .title {
        font-size: 24rpx;
        color: #333;
      }
    }
  }

  .btns {
    .btn {
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      font-size: 28rpx;
      color: #ffffff;

      &.btn-cart {
        width: 260rpx;
        height: 80rpx;
        background: #f40d0d;
        border-radius: 40rpx 0rpx 0rpx 40rpx;
      }

      &.btn-buy {
        width: 260rpx;
        height: 80rpx;
        background: #f49c0d;
        border-radius: 0rpx 40rpx 40rpx 0rpx;
      }

      &.btn-disabled {
        background: #dddddd;
      }

      &[disabled] {
        background: #dddddd;
      }
    }
  }
}

.page-foot-flashsale {
  .grid-box {
    flex: none !important;
    padding-right: 24rpx !important;
  }

  .btns {
    flex: 1 !important;

    .btn-buy {
      width: 100% !important;
      height: 80rpx;
      background: #cb0011;
      border-radius: 40rpx 40rpx 40rpx 40rpx !important;
    }
  }
}
</style>
